{% extends "admin/layout.html" %}
{% block title %} 模板装饰 {% endblock %}
{% set theme_active = 'active' %}

{% block header %}
<link href="/static/admin/css/theme.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="/static/js/jquery-ui-1.7.2.min.js"></script>
<script type="text/javascript" src="/static/js/json.js"></script>
<style type="text/css">
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; background:#E6E6E6; border:1px solid #D3D3D3; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 30px !important; background:#F5F5F5; }
.ui-sortable-placeholder * { visibility: hidden; }
</style>
<script type="text/javascript">
function update_sidebar() {
  columns = {};
  $('div.column').each(function() {
    sidebar_id = $(this).attr('id');
    sidebar_id = sidebar_id.replace(/layout_column/g, '')
    // console.log(sidebar_id);
    
    sidebar_column = new Array();
    $(this).find('div.side').each(function() {
      item = {'name': $(this).attr('id')};
      sidebar_column.push(item);
    });
    columns[sidebar_id] = sidebar_column;
  });
  // console.log(JSON.stringify(columns));
  $.post('/admin/theme/widget', JSON.stringify(columns), function(data) {
    // console.log(data);
  }, 'json');
}

$(document).ready(function() {
	$('.column').sortable({
		items: '> div.side',
		cursor: 'move',
		appendTo: 'body',
		connectWith: ['.column'],
    start: function(e,ui) {
      ui.helper.css("width", ui.item.width());
      ui.helper.addClass('itemactive');
    },
    update: function(e,ui) {
      update_sidebar();
      // console.log(ui);
    },
    stop: function(e,ui) {
      ui.item.removeClass('itemactive');
    }
  });
  $('td#posCenter div.main > div.side').draggable({
    connectToSortable: '.column',
    helper: 'clone',
    revert: 'invalid'
  });
});
</script>
{% endblock %}

{% block content %}
<div id="containerHolder">
  <div id="container">
    <div id="sidebar">
      <ul class="sideNav">
        <li><a href="/admin/theme">模板管理</a></li>
        <li><a href="/admin/theme/install">安装模板</a></li>
        <li><a href="/admin/theme/widget" class="active">模板装饰</a></li>
      </ul>
    </div>

    <!-- h2 stays for breadcrumbs -->
    <h2><a href="/admin">Dashboard</a> &raquo; <a href="/admin/theme/widget" class="active">模板装饰</a></h2>

    <div id="main">
      <h3>模板布局</h3>
      
      <div id="theme">
        <div id="themeLayout">
          
          <table border="0" cellspacing="0" cellpadding="0" id="layoutContainer">
            <tr>
              <td id="posTopLeft2"></td>
              <td id="posTopLeft1"></td>
              <td id="posTop" class="col_center"></td>
              <td id="posTopRight1"></td>
              <td id="posTopRight2"></td>
            </tr>
            <tr>
              <td id="posLeft2"></td>
              <td id="posLeft1"></td>
              <td id="posCenter" class="col_center">
                <div class="main" style="position: relative;">
                  <h3>可选装饰 <a href="/admin/theme/widget/init">初始化默认装饰</a></h3>
                  {% for widget in widgets %}
                  <div id="{{ widget.name }}" class="side" style="width:227px;">
                    <h4><span class="title">{{ widget.item().name() }}</span><!-- <span class="editMod"><a class="mod_edit" title="编辑" href="#">[编辑]</a></span> --></h4>
                  </div>
                  {% endfor %}
                </div>
              </td>
              <td id="posRight1">
                {% for num in range(sidebar_num) %}
                {% set num = (num + 1)|string() %}
                <div id="layout_column{{ num }}" class="column" style="position:relative;width:230px;min-height:76px">
                  <h3>副栏 {{ num }}</h3>
                  {% for s in processor.sidebar(num) %}
                  <div id="{{ s.key_name }}" class="side">
                    <h4><span class="title">{{ s.name() }}</span><!-- <span class="editMod"><a class="mod_edit" title="编辑" href="#">[编辑]</a></span> --></h4>
                  </div>
                  {% endfor %}
                </div>
                {% endfor %}
              </td>
              <td id="posRight2"></td>
            </tr>
            <tr>
              <td id="posBottomLeft2"></td>
              <td id="posBottomLeft1"></td>
              <td id="posBottom" class="col_center"></td>
              <td id="posBottomRight1"></td>
              <td id="posBottomRight2"></td>
            </tr>
          </table>
          
        </div>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</div>
{% endblock %}